<template>
  <ScalablePage>
    <!-- 巡检管理-右侧 -->
    <div class="left">
      <!-- <img src="../assets/xj/b1.png" style="width: 100%" /> -->
      <div class="screen-title-container-l1">
        <img src="../assets/xj/b1.png" style="width: 100%" />
        <div class="screen-title-text-l1">更多</div>
      </div>
      <div
        style="display: flex; justify-content: space-between; width: 78%; margin: 0 auto; margin-top: 30px; margin-bottom: 20px;">
        <div class="total-number ">
          <img src="@/assets/icons/top-total.svg" alt="icon" />
          <img src="@/assets/icons/top-gif.svg" alt="icon" />
          <div>巡检设备总数</div>
          <p><span style="font-weight: bold">{{ totalDevices }}</span><span style="font-size: 18px;"> 台</span></p>
        </div>
        <div class="total-number ">
          <img src="@/assets/icons/top-total.svg" alt="icon" />
          <img src="@/assets/icons/top-gif.svg" alt="icon" />
          <div>巡检任务总数</div>
          <p><span style="font-weight: bold">{{ totalTasks }}</span><span style="font-size: 18px;"> 条</span></p>
        </div>
      </div>
      <Xj1rightScroll :listData="listData" style="margin-top: 40px"></Xj1rightScroll>
      <Xj1rightEcharts :monthlyCounts="monthlyCounts" style="margin-top: 40px"></Xj1rightEcharts>
    </div>
  </ScalablePage>
</template>

<script setup lang="ts">

import ScalablePage from "@/components/ScalablePage.vue";
import Xj1rightEcharts from "./xj1right-echarts.vue";
import Xj1rightScroll from "./xj1right-scroll.vue";
import { onMounted, ref, toRefs, reactive, onBeforeUnmount } from "vue";

import { getOnlineInspectionAPI } from "@/utils/shuiwu/api";

const formatDate = (dateStr: string) => {
  const date = new Date(dateStr);
  return date.toLocaleString('zh-CN', { hour12: false });
};

const state = reactive({
  xujianJilu: [],
  monthlyData: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
});

// 初始化每月计数数组（从1月到12月）
const monthlyCounts = ref(Array(12).fill(0));
let { xujianJilu, monthlyData } = toRefs(state);
let listData = ref([]);

// 设备总数
const totalDevices = ref(0);
// 巡检任务总数
const totalTasks = ref(0);

onMounted(() => {
  getOnlineInspectionAPI().then((res) => {
    if (res.data) {
      const deviceSet = new Set()
      res.data.forEach(item => {
        deviceSet.add(item.equipId)

        const endTime = new Date(item.taskEndTime);
        const year = endTime.getFullYear();
        const month = endTime.getMonth() + 1;

        // 获取当前年份
        const currentYear = new Date().getFullYear();
        if (year === currentYear) {
          if (month === 1) {
            monthlyCounts.value[0]++;
          } else if (month === 2) {
            monthlyCounts.value[1]++;
          } else if (month === 3) {
            monthlyCounts.value[2]++;
          } else if (month === 4) {
            monthlyCounts.value[3]++;
          } else if (month === 5) {
            monthlyCounts.value[4]++;
          } else if (month === 6) {
            monthlyCounts.value[5]++;
          } else if (month === 7) {
            monthlyCounts.value[6]++;
          } else if (month === 8) {
            monthlyCounts.value[7]++;
          } else if (month === 9) {
            monthlyCounts.value[8]++;
          } else if (month === 10) {
            monthlyCounts.value[9]++;
          } else if (month === 11) {
            monthlyCounts.value[10]++;
          } else if (month === 12) {
            monthlyCounts.value[11]++;
          }
        }
      });
      totalDevices.value = deviceSet.size
      totalTasks.value = res.data.length

      const formatted = res.data.map(item => ({
        ...item,
        taskStartTime: formatDate(item.taskStartTime),
        taskEndTime: formatDate(item.taskEndTime),
        createTime: formatDate(item.createTime),
      }));
      state.xujianJilu = formatted;
      listData.value = [] // 清空
      listData.value = JSON.parse(JSON.stringify(formatted));
    }
  });
  onBeforeUnmount(() => {
    if (myChart) {
      myChart.dispose();
      window.removeEventListener('resize', myChart.resize);
    }
  });
});
</script>
<style scoped lang="less">
.left {
  // background-color: black;
}

.screen-title-container-l1 {
  position: relative;
  display: inline-block;
}

.screen-title-text-l1 {
  position: absolute;
  top: 36%;
  left: 57%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 20px;
  text-align: center;
  white-space: nowrap;
}


.manage {
  display: flex;
  flex-direction: column;

  .danger {
    width: 186px;
    height: 20px;
    margin-bottom: 2px;
    background-image: url("../../assets/rightimg/icon-1.png");

    .danger-title {
      width: 186px;
      height: 19px;
      font-size: 16px;
      color: #ffffff;
      // color: #C2F5FF;
      margin-left: 44px;
      line-height: 16px;
    }
  }

  .bottom {
    display: flex;

    .alert {
      width: 68px;
      height: 32px;
      display: flex;
      align-items: center;
      // background-color: #FFC047;
      background-color: hsla(#ff911f, 0.2);

      .ale {
        width: 3px;
        height: 100%;
        background-color: #ff911f;
        border-radius: 2px;
      }

      .alert-img {
        display: flex;
        width: 20px;
        height: 20px;
      }

      .alert-font {
        color: #ffc047;
      }
    }

    .alert-details {
      width: 364px;
      height: 32px;
      line-height: 32px;
      padding: 0 0 0 10px;
      color: #fff;
      background-color: hsla(#ff911f, 0.2);
    }
  }

  //
}

.top-style {
  display: flex;
}

.scroll-title-messages {
  height: 20px;
  text-align: center;
  padding: 0;
  line-height: 20px;
  margin-right: 2px;
  background-color: #0d497f42;
  font-size: 10px;
}

.messages-xuhao {
  width: 42px;
}

.messages-name {
  width: 112px;
}

.messages-startTime {
  width: 106px;
}

.messages-endTime {
  width: 106px;
}

.messages-status {
  width: 50px;
}

.messages-result {
  width: 50px;
}

.total-number {
  position: relative;
  width: 150px;
  height: 150px;

  /** 选中第一个图片 */
  img:first-child {
    width: 150px;
    height: 150px;
  }

  /** 选中第二个图片 */
  img:nth-child(2) {
    position: absolute;
    left: 45px;
    top: 38px;
    width: 60px;
    height: 60px;
  }

  /** 选中最后一个 */
  div {
    position: absolute;
    left: 0;
    top: 110px;
    width: 150px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-size: 18px;
  }

  p {
    position: absolute;
    left: 0;
    top: 60px;
    width: 150px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #fff;
    font-size: 14px;

    span {
      font-size: 20px;
      color: #ffffff;
    }
  }
}
</style>
